<template>
      <el-container>
          <el-header style="width:100%;height:45px;background-color:#4f54e8;">
              <Header/>
          </el-header>
          <el-container class="mainBtm">
                <el-aside class="scrollDiv menuContent trans"  :style="menuState.openState?'max-width:200px;':'width:0;max-width:200px;'">
                <MenuTree/>
                </el-aside>
                    <el-main style="margin:0;padding:0;" class="scrollDiv trans">
                        <el-scrollbar class="menuBar" :style="menuState.openState?'width:calc(100vw - 200px);':'width:100vw;'">
                            <div class="scrollbar-flex-content" >
                                <p v-for="item in navTabStores.tabs" @click="routeTo(item)" :key="item.name" :class="item.clicked ? 'clicked':'scrollbar-demo-item'" >
                                    <span style="cursor:pointer">{{ item.name }}</span>
                                    <el-icon @click.stop="removeTab(item)" v-show="item.name != '主页'" ><Close />
                                    </el-icon>
                                </p>
                            </div>
                        </el-scrollbar>
                        <div class="mainContent" style="padding:0 5px;">
                            <router-view v-slot="{ Component }">
                                <keep-alive include="Online">
                                    <component :is="Component" />
                                </keep-alive>
                            </router-view>
                        </div>
                    </el-main>
            </el-container>
      </el-container>
</template>
<script setup>
    import MenuTree from '@/components/MenuTree.vue'
    import Header from '@/components/Header.vue'
    import {onMounted,reactive,ref } from 'vue'
    import {ArrowDown} from '@element-plus/icons-vue'
    import { openState } from '@/stores/openState'
    import {navTab} from '@/stores/navTab'
    let navTabStores = navTab()
    let menuState = openState()
    onMounted(function () {
        let item = {name: '主页', path:'/main', clicked:true}// 登录进来默认跳转到主页
        routeTo(item)
    })
function routeTo(item) {
    navTabStores.routeTo(item)
}

function removeTab(item) {
    navTabStores.removeTab(item)
}
</script>
<style scoped>
    .trans{
        transition:width .5s linear;
    }
    .scrollbar-flex-content {
        display: flex;
    }
    .scrollbar-demo-item {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        min-width: 80px;
        line-height: 24px;
        margin: 2px 1px;
        padding:0 1px;
        text-align: center;
        border-radius: 3px;
        background: #5d65df;
        color: #fff;
    }
    .clicked{
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        min-width: 80px;
        line-height: 24px;
        margin: 2px 1px;
        padding:0 1px;
        text-align: center;
        border-radius: 3px;
        background: #ffffff;
        color: #000;
        border:1px solid #838dff;
    }
    .menuBar{
        background-color: #ffffff;
        box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.1);
        height: 30px;
        z-index:999;
        transition:all .5s linear;
        overflow-x:hidden;
    }

    .scrollDiv::-webkit-scrollbar {
        width: 4px;
    }
    .scrollDiv::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
    }
    .scrollDiv::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }
</style>